<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 前端开发中像素要分为两种情况讨论css像素和物理像素 -->
		<!-- 编写网页时使用css像素px -->
		<!-- 浏览器显示网页时需要将css像素转化为物理像素，一个css像素有几个物理像素由浏览器决定-->
		<!-- 视口（viewport）视口是屏幕中用来显示网页的区域-->
		<!-- 在不同屏幕里单位像素的大小是不同的，像素越小屏幕越清晰 -->
		<!-- 默认情况下，移动端网页会将视口设置为980px 如果网页宽度超过了980，移动端网页会自动缩放以完整显示网页 -->
		<div class="box1"></div>
	</body>
</html>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.box1{
		width: 980px;
		height: 100px;
		background-color: #0000FF;
	}
</style>